/**********************
       CONSTANTS
***********************/

//** Global color
@red            : #CC594A;
@yellow         : #B8CC24;
@blue           : #8BC5FF;
@purple         : #6F3596;
@white          : #FFFFFF;
@bg-gray          : #455868;
@nav-border          : #576979;


//== Components
//
//## Define common

@defaultShapeWidth : 200px;
@defaultShapeHeight : 200px;
@defaultShapeMargin : 20px;
@defaultRadius : 30px;

@borderSize : @defaultShapeWidth * 0.05;
//@borderColor : desaturate(@defaultShapeColor, 100%);
//@borderColor : darken(desaturate(@defaultShapeColor, 100%), 100%);
//@borderColor : spin(@defaultShapeColor, 100%);

@list-width: 100%;
@margin-right: 2%;
@margin-bottom: @margin-right;

@base-width  : 1280px;
@tablet-width : 600px;
@mobile-width : 480px;

@base:~"screen and (max-width: @{base-width})";
@tablet:~"screen and (max-width: @{tablet-width})";
@mobile:~"screen and (max-width: @{mobile-width})";